Focus Indicators with Multiple Focus Styles
Some controls apply more than one focus style at once — a double outline, or an outline combined with a shadow ring. This page explains how the tool handles that case: which styles it recognises, what each one is compared against, and when it decides to report.
Which focus styles are recognised
When an element receives focus, the tool compares the focused and unfocused states and looks for any visual change that could act as a focus indicator. It recognises:
- Outline — including outlines drawn inside the element
- Border — when a border appears or changes colour on focus
- Shadow rings — including multiple layers with different colours, such as a coloured ring plus a white offset ring
- Background colour change on the control itself
- Text colour change
- Text decoration — an underline or overline that appears on focus
Purely decorative shadows — the kind used for depth, with a visible offset or blur — are not treated as focus indicators, so they never cause a pass or a failure on their own.
The browser's native focus ring is detected and the check is skipped entirely for that element. Its rendered colour is chosen by the browser at paint time and is exempt from the site author's contrast requirements.
Are all styles evaluated, or does one win?
Every focus style present is evaluated independently. No single style is assumed up front to be "the" indicator. Each candidate — the outline, the border, each shadow layer, the background change, the text colour, the text decoration — is measured against the appropriate background on its own.
There is no fixed winner. The styles are effectively evaluated as a set, and the element's result is decided by whether any one of them provides sufficient contrast.
How pass and fail are decided
The threshold is 3:1.
- If at least one focus style reaches 3:1 or better, the element passes and nothing is reported — even if the other focus styles on the same element would fail. One sufficient style is enough to clear the control.
- An issue is reported only when every candidate focus style falls below 3:1.
This is the core behaviour to understand: a control with two or more focus styles is not flagged as long as one of them contrasts adequately with its surroundings.
When a failure is reported, the colours shown correspond to the last indicator-and-background pair that was evaluated, so the report always reflects a genuinely insufficient combination.
What each style is compared against
It depends on where the indicator is drawn:
| Focus style | Compared against |
|---|---|
| Outline drawn outside the control | The surrounding background — the nearest containing element with a solid background |
| Shadow ring drawn outside | The surrounding background |
| Background colour change | The surrounding background — the new colour fills the control, so it must contrast with the area around it |
| Border | The control's own background |
| Shadow ring drawn inside | The control's own background |
| Outline drawn inside the control | The control's own background |
| Text colour change | The control's own background |
| Text decoration | The control's own background |
When the control's own background changes on focus, the tool uses the focused background for indicators drawn inside, because those indicators are only visible while focused and must contrast with what is actually behind them at that moment.
Common scenarios and expected results
| Scenario | Result |
|---|---|
| Double outline; one ring contrasts with the surroundings, the other does not | Pass — one sufficient ring is enough |
| Outline plus shadow ring, at least one passes | Pass |
| Multi-layer shadow (coloured ring plus white offset ring); any layer passes | Pass |
| Focus changes both text colour and background colour, and the result is measured against the surrounding area | Pass if ≥ 3:1, otherwise fail |
| The browser's native focus ring | Skipped — never reported |
| A coloured focus ring plus a purely decorative drop shadow | Only the ring is evaluated; the drop shadow is ignored |
| Every focus style falls below 3:1 against its respective background | Fail — reported |
Known limitations and edge cases
- Very small gaps between the indicator and a second background. When the space between the control and a neighbouring block of colour is very small, the indicator ends up almost adjacent to that second colour. The tool may then compare against the closest available colour rather than the intended one, which can produce an incorrect background in the report. Tracked separately.
- Unsupported colour formats. Backgrounds written in colour notations the tool cannot interpret are treated as unknown, and it falls back to a surrounding background or a neutral default.
- Gradient or image backgrounds. When a background is a gradient or an image, no single exact colour is available, so the tool searches upward for the nearest solid background colour.
- Translucent shadow rings. Semi-transparent rings are smoothed by the browser when drawn, so the rendered colour can differ slightly from what the stylesheet declares. The tool accounts for this by blending the declared colour over the background, or sampling the rendered ring, to get a stable result.
In short
The tool treats every focus style on a control as an independent candidate, measures each against the background appropriate to where it is drawn, and reports a contrast issue only when none of them meets 3:1. If any single focus style contrasts sufficiently, the control is not reported.
Related
- How Focus Indicator Contrast Is Evaluated — the internal-versus-external distinction in more detail
WCAG reference
Success Criterion 1.4.11 Non-text Contrast (Level AA)